<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title" back-url="index/order"></my-navbar>
		<view class="page-idcard" v-if="sensitive===2">
			<scroll-view :scrollY="true">
				<block v-if="is_idcard_upload">
					<view class="cardno-upload needsclick">
						<my-u-upload :fileList="fileList.id_front_thumb" name="id_front_thumb" @afterRead="upload" @delete="deletePic" :capture="['album','camera']" accept="image" :maxCount="1" :height="upload_img_height" :width="upload_img_width" :diy="true">
							<image class="cardno-upload-base64" :style="upload_img_style" mode="aspectFill" :src="default_img.id_front_thumb"></image>
						</my-u-upload>
					</view>
					<view class="cardno-upload-tips">上传身份证 - 正面</view>
					
					<view class="cardno-upload needsclick">
						<my-u-upload :fileList="fileList.id_back_thumb" name="id_back_thumb" @afterRead="upload" @delete="deletePic" :capture="['album','camera']" accept="image" :maxCount="1" :height="upload_img_height" :width="upload_img_width" :diy="true">
							<image class="cardno-upload-base64" :style="upload_img_style" mode="aspectFill" :src="default_img.id_back_thumb"></image>
						</my-u-upload>
					</view>
					<view class="cardno-upload-tips">上传身份证 - 反面</view>
				</block>
				
				<block v-if="is_driver_upload">
					<view class="cardno-upload needsclick">
						<my-u-upload :fileList="fileList.driver_thumb" name="driver_thumb" @afterRead="upload" @delete="deletePic" :capture="['album','camera']" accept="image" :maxCount="1" :height="upload_img_height" :width="upload_img_width" :diy="true">
							<image class="cardno-upload-base64" :style="upload_img_style" mode="heightFix" :src="default_img.driver_thumb"></image>
						</my-u-upload>
					</view>
					<view class="cardno-upload-tips">机动车驾驶证 - 正面</view>
				</block>
				
				
			    <view class="cardno-cardinfo">
					<view class="cardno-cardinfo-item">
						<button class="my-but-primary" @click="submit()">确认提交</button>
						<!--<view class="cardno-cardinfo-gat-entry"></view> -->
					</view>
			    </view>
			</scroll-view>
		</view>
		
		<view class="sensitive-box" v-if="sensitive===1">
			<u-empty mode="data" textSize="16" text="请下单后 , 前往线下门店进行身份信息核实 , 方可进行下一步操作" icon="/static/images/empty/list.png"></u-empty>
		</view>
		
		<u-popup :show="confirm_show" @close="confirm_show=false" :safeAreaInsetBottom="false" :closeable="true" mode="center" :round="10">
				<view class="pop-title">请确认身份证信息</view>
				<view class="pop-box" style="margin: 20rpx auto;">
					<u-cell  title="真实姓名">
						<view slot="value">
							<input v-model="tenant_post.id_name" class="form-input" placeholder="真实姓名"/>						</view>
					</u-cell>
					<u-cell  title="身份证号码">
						<view slot="value">
							<input v-model="tenant_post.id_code" class="form-input" placeholder="身份证号码"/>
						</view>
					</u-cell>
				</view>
				<view class="pop-foot">
					<button class="my-but-primary" @click="confirmInfo()">确定信息</button>
				</view>
		</u-popup>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import $file from "@/common/file"
	import checkLogin from '@/mixins/loginCheck.js'
	export default {
		mixins:[checkLogin],
		data() {
			return {
				nav_title:'身份验证',
				sensitive:0,
				default_img:{						//默认图片
					id_front_thumb:'',
					id_back_thumb:'',
					driver_thumb:'',
				},
				confirm_show:false,					//确认信息弹窗
				upload_img_style:"height:400rpx; width: 640rpx;",
				upload_img_height:"400rpx",
				upload_img_width:"640rpx",
				post_data:{				//提交的数据
					id:0,				//传值过来的订单ID
					id_front_thumb:'',
					id_back_thumb:'',
					driver_thumb:'',
				},
				tenant_post:{
					order_id:0,
					tenant_id:0,
					id_name:"",
					id_code:"",
				},		
				fileList:{				//上传控件数组
					id_front_thumb:[],
					id_back_thumb:[],
					driver_thumb:[],
				},
				is_drive:false,			//是否需要代驾订单，默认不是
				is_idcard_upload:false,		//是否上传了身份证
				is_driver_upload:false,		//是否上传了驾驶证
			}
		},
		onLoad(option){
			if(option.id!=null){
				this.post_data.id=option.id
				this.tenant_post.order_id=option.id
			}else{
				this.$c.error('缺少参数','index/index')
			}
			this.initData()
		},
		onReady(){
		},
		onShow(){
		},
		computed:{
			...mapState({
				$config:state => state.$config,
			})
		},
		methods: {
			initData(){
				let than=this;
				// 判断全局是否显示上传组件
				this.$u.api.orderInfo({order_id:this.post_data.id}).then(res_info=>{
					let is_drive=res_info.data.order.is_drive==1?true:false;
					let res_order=res_info.data.order;
					this.$u.api.getConfig().then(res=>{
						let config=res.data;
						// 默认身份证正面
						if(res_order.id_front_thumb!=''){
							than.default_img.id_front_thumb=res_order.id_front_thumb
							this.post_data.id_front_thumb=res_order.id_front_thumb
						}else{
							than.default_img.id_front_thumb=config.design.idcard_bg1
						}
						// 默认身份证反面
						if(res_order.id_back_thumb!=''){
							than.default_img.id_back_thumb=res_order.id_back_thumb
							this.post_data.id_back_thumb=res_order.id_back_thumb
						}else{
							than.default_img.id_back_thumb=config.design.idcard_bg2
						}
						// 默认驾驶证
						if(res_order.driver_thumb!=''){
							than.default_img.driver_thumb=res_order.driver_thumb
							this.post_data.driver_thumb=res_order.driver_thumb
						}else{
							than.default_img.driver_thumb=config.design.driver_bg
						}
						
						than.sensitive=config.base.is_app_audit
						
						if(is_drive){				//代驾订单
							than.is_idcard_upload=config.base.upload_agent_cert==1?true:false
							than.is_driver_upload=config.base.upload_agent_driver==1?true:false
						}else{						//普通订单
							than.is_idcard_upload=config.base.upload_cert==1?true:false
							than.is_driver_upload=config.base.upload_driver==1?true:false
						}
					})
					
				});
			},
			deletePic(event) {
				this.fileList[event.name].splice(event.index, 1)
			},
			//上传图片
			async upload(event){
				let name=event.name
				this.fileList[name].push({
					...event.file,
					status: 'uploading',
					message: '上传中'
				})
				
				const result = await $file.uploadImg(event.file.url)

				this.post_data[name]=result.data.url
				
				this.fileList[name].splice(event.index, 1, Object.assign(event.file,{
					status: 'success',
					message: '',
					url: result.data.url
				}))
				//console.log(this.fileList);
			},
			//确认信息
			confirmInfo(){
				if(!this.tenant_post.id_name){
					this.$c.info('请输入姓名')
				}else if(!this.tenant_post.id_code || !uni.$u.test.idCard(this.tenant_post.id_code)){
					this.$c.info('身份证号格式不正确')
				}else{
					this.$u.api.tenantConfirm(this.tenant_post).then(res2=>{
						this.nextFlow(res2)
					})
				}
			},
			//提交订单
			submit(){
				if(this.is_idcard_upload && this.post_data.id_front_thumb==""){
					this.$c.info('请先上传身份证正面')
				}else if(this.is_idcard_upload && this.post_data.id_back_thumb==""){
					this.$c.info('请先上传身份证反面')
				}else if(this.is_driver_upload && this.post_data.driver_thumb==""){
					this.$c.info('请先上传驾驶证正面')
				}else{
					uni.showLoading({
						title:"识别中..."
					})
					//识别身份证信息
					this.$u.api.readIdCard(this.post_data).then(res=>{
						uni.hideLoading()
						if(res.data.order_id && res.data.url){			//无需确认信息，直接提交
							this.nextFlow(res)
						}else{
							this.tenant_post=res.data
							this.confirm_show=true	
						}
					})
				}
			},
			//到下个流程
			nextFlow(res){
				this.$c.a("flow/"+res.data.url+"/index",{id:this.post_data.id,})
			}
		}
	}
</script>

<style lang="scss">
	.page-idcard {
	    padding: 40rpx;
	}
	
	.page-idcard .cardno-upload-tips {
	    margin: 35rpx auto 55rpx auto;
	    font-size: 24rpx;
	    line-height: 1;
	    text-align: center;
	}
	
	.page-idcard .cardno-upload {
	    position: relative;
	    display: -ms-flexbox;
	    display: flex;
	    flex-direction: column;
	    -ms-flex-align: center;
	    align-items: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    background: #FFFFFF;
		background-repeat: no-repeat;
		background-position: center;
		padding: 15rpx;
	    border-radius: 10rpx;
	}
	
	.page-idcard .cardno-upload-icon {
	    width: 40rpx;
	    height: 34rpx;
	    margin-bottom: 20rpx;
	    background-size: 100% 100%;
	}
	
	.page-idcard .cardno-upload-title {
	    color: #666;
	    font-size: 24rpx;
	    line-height: 1;
	}
	
	.page-idcard .cardno-upload:active {
	    background: #f0f0f0;
	}
	
	.page-idcard .cardno-upload-base64 {
	    object-fit: contain;
	}
	
	.page-idcard .cardno-cardinfo-item {
	    margin-top: 30rpx;
	}
	
	.page-idcard .cardno-cardinfo-item-title {
	    display: block;
	    margin-bottom: 15rpx;
	    font-size: 24rpx;
	}
	
	.page-idcard .cardno-cardinfo-item-input {
	    height: 90rpx;
	    margin: 0;
	    padding: 0;
	    line-height: 90rpx;
	    border: 2rpx solid #ededed;
	    border-radius: 6rpx;
	}
	
	.page-idcard .cardno-cardinfo-item-input:focus {
	    position: relative;
	    z-index: 2;
	    border: 1px solid var(--view-theme);
	    box-shadow: 0 0 .1rem rgba(0,187,85,.3);
	}
	
	.page-idcard .cardno-cardinfo-item-input .at-input__container {
	    height: 100%;
	    padding-left: 25rpx;
	}
	
	.page-idcard .cardno-cardinfo-item-input .at-input__children::after {
	    content: none;
	}
	
	.page-idcard .cardno-cardinfo-item-input .at-input__icon-close {
	    color: #fff;
	    background-color: #b8b8b8;
	    border-radius: 50%;
	}
	
	.page-idcard .cardno-cardinfo-submit {
	    margin: 50rpx 0 15rpx;
	    color: #fff;
	    background-color: var(--view-theme);
	}
	
	.page-idcard .cardno-cardinfo-gat-entry {
	    display: block;
	    margin-top: 20rpx;
	    color: var(--view-theme);
	    font-size: 24rpx;
	    line-height: 2;
	    text-align: center;
	}
	
	.page-idcard .cardno-cardinfo-gat-entry:active {
	    opacity: .7;
	}
	
	.page-idcard .cardno-cardinfo .at-input__input {
	    height: 100%!important;
	    padding: 0;
	    font-size: 30rpx;
	}
	
	.page-idcard .cardno-cardinfo .at-input__container {
	    height: 100%;
	}
	
	.page-idcard .cardno-cardinfo .at-input__icon-close {
	    color: #fff;
	    background-color: #b8b8b8;
	    border-radius: 50%;
	}
	
	.page-idcard .cardno-cardinfo .at-input .placeholder {
	    color: #999;
	    font-size: 28rpx;
	}
	
	.page-idcard .cardno-cardinfo .at-input:focus {
	    position: relative;
	    z-index: 2;
	    border: 1px solid var(--view-theme);
	    box-shadow: 0 0 .1rem rgba(0,187,85,.3);
	}
	.sensitive-box{
		margin: 30rpx;
	}
	.pop-box{
		width: 600rpx;
	}
</style>
